<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted } from 'vue'

// 鼠标位置坐标
const mouseX = ref(0)
const mouseY = ref(0)

// 记录上次更新时间
const lastUpdateTime = ref('')

// 鼠标移动事件处理函数
const handleMouseMove = (event: MouseEvent) => {
  mouseX.value = event.clientX
  mouseY.value = event.clientY
  lastUpdateTime.value = new Date().toLocaleTimeString()
}

// 使用 watchEffect 监听位置变化并记录
watchEffect(() => {
  console.log(`鼠标位置更新：(${mouseX.value}, ${mouseY.value}) - ${lastUpdateTime.value}`)
})

// 组件挂载时添加事件监听器
onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)
})

// 组件卸载时移除事件监听器，防止内存泄漏
onUnmounted(() => {
  window.removeEventListener('mousemove', handleMouseMove)
})

// 重置位置到中心点
const resetPosition = () => {
  const centerX = window.innerWidth / 2
  const centerY = window.innerHeight / 2
  mouseX.value = centerX
  mouseY.value = centerY
  console.log(`重置到屏幕中心：(${centerX}, ${centerY})`)
}

// 位置是否在屏幕边界附近
const isNearBorder = ref(false)

// 监听位置变化，检测是否靠近边界
watchEffect(() => {
  const margin = 50
  isNearBorder.value = (
    mouseX.value < margin || 
    mouseX.value > window.innerWidth - margin ||
    mouseY.value < margin ||
    mouseY.value > window.innerHeight - margin
  )
})
</script>

<template>
  <div class="card">
    <h2>🏆 作业3｜鼠标位置实时追踪</h2>
    
    <div class="mouse-tracker">
      <div class="position-display">
        <h3>🖱️ 鼠标实时位置</h3>
        <p>X 坐标: <span class="coordinate">{{ mouseX }}</span></p>
        <p>Y 坐标: <span class="coordinate">{{ mouseY }}</span></p>
        <p class="update-time">最后更新: {{ lastUpdateTime }}</p>
      </div>
      
      <div class="position-warning" v-if="isNearBorder">
        ⚠️ 鼠标靠近屏幕边界！
      </div>
      
      <button @click="resetPosition" class="reset-btn">
        🎯 重置到屏幕中心
      </button>
      
      <!-- 可视化鼠标位置指示器 -->
      <div class="visual-area">
        <div 
          class="mouse-indicator" 
          :style="{
            left: Math.min(90, Math.max(0, (mouseX / window.innerWidth) * 100)) + '%',
            top: Math.min(90, Math.max(0, (mouseY / window.innerHeight) * 100)) + '%'
          }"
        ></div>
      </div>
      
      <div class="screen-info">
        <p>当前屏幕尺寸: {{ window.innerWidth }} × {{ window.innerHeight }}</p>
      </div>
    </div>
    
    <div class="explanation">
      <h4>📝 实现要点</h4>
      <ul>
        <li>使用 window.addEventListener('mousemove', ...) 监听鼠标移动</li>
        <li>使用 ref 存储鼠标坐标</li>
        <li>使用 watchEffect 自动追踪位置变化</li>
        <li>在组件卸载时移除事件监听器，避免内存泄漏</li>
      </ul>
      <p class="hint">💡 提示：移动鼠标在整个屏幕上，这里会实时显示坐标！</p>
    </div>
  </div>
</template>

<style scoped>
.mouse-tracker {
  margin: 2em 0;
}

.position-display {
  margin: 1em 0;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.coordinate {
  font-size: 1.2em;
  font-weight: bold;
  color: #4caf50;
  font-family: monospace;
}

.update-time {
  color: #888;
  font-size: 0.9em;
}

.position-warning {
  background-color: #ff9800;
  color: white;
  padding: 0.5em;
  border-radius: 4px;
  margin: 1em 0;
  font-weight: bold;
}

.reset-btn {
  background-color: #2196f3;
  color: white;
  margin: 1em 0;
}

.visual-area {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px dashed #666;
  border-radius: 8px;
  margin: 1em 0;
  overflow: hidden;
}

.mouse-indicator {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #f44336;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
  transition: left 0.1s ease, top 0.1s ease;
}

.screen-info {
  font-size: 0.9em;
  color: #888;
  margin-top: 1em;
}

.explanation {
  text-align: left;
  margin-top: 2em;
}

.hint {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1em;
  border-radius: 8px;
  font-style: italic;
}
</style>